import React, { useState } from 'react';
import { Modal, Radio } from 'antd';
import { SortAscendingOutlined, SortDescendingOutlined } from '@ant-design/icons';

const Sort: React.FC<{ params?: string; isModalVisible: boolean; handleCancel: () => void; handleOk: (datasource: any) => void }> = ({
  params,
  isModalVisible,
  handleCancel,
  handleOk,
}) => {
  const [value, setValue] = useState(params || 'desc');

  return (
    <Modal title="数值过滤" visible={isModalVisible} onCancel={handleCancel} cancelText="取消" okText="确定" onOk={() => handleOk(value)}>
      <div style={{ textAlign: 'center' }}>
        <Radio.Group onChange={e => setValue(e.target.value)} value={value}>
          <Radio value="asc">
            <SortAscendingOutlined />
            升序
          </Radio>
          <Radio value="desc">
            <SortDescendingOutlined />
            降序
          </Radio>
        </Radio.Group>
      </div>
    </Modal>
  );
};

export default Sort;
